<template>
	<view>
		<form @submit="forms" @reset="">


			<view class="title">
				<input type="text" name='title' placeholder="请输入标题" placeholder-class="oi" />
			</view>
			<view class="text">
				<textarea value="" name='text' placeholder="请描述您的问题，150字以内" placeholder-class="oi" maxlength="150" />
				<view class="shangchuan">

				<view class='upload-image-view'>
					<!-- 标题已经省略 -->
					<!-- <view class='title'>上传xxxx图片</view> -->
					<block v-for="(image,index) in imageList" :key="index">
						<view class='image-view'>
							<image :src="image" :data-src="image" @tap="previewImage"></image>
							<view class='del-btn' :data-index="index" @tap='deleteImage(index)'>
								<view class='baicha'></view>
							</view>
						</view>
					</block>
					<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">
						<view class="cross">
							<view class="transverse-line"></view>
							<view class="vertical-line"></view>
						</view>

					</view>
					<!-- <view class='info'>上传证书/证件，不超过{{imageLength}}张。(非必填)</view> -->
				</view>
			</view>
		</view>
		<button form-type="submit" class="submit">提交</button>

		</form>
	</view>
</template>

<script>
	var sourceType = [

		['album'], //相册
		['album'] //拍照或相册
	]
	var sizeType = [
		['compressed'], //压缩

		['compressed'] //压缩或原图
	]
			import ImgUrl from '../../components/http/http.js'
	export default {
		data() {
			return {
				imageList: [], //保存图片路径集合
				imageLength: 4, //限制图片张数
				sourceTypeIndex: 2, //添加方式限制
				sizeTypeIndex: 2, //图片尺寸限制
			}
		},
		onLoad() {
			var jweixin = require('jweixin-module')
			var that = this
			console.log(jweixin)
				var urls = window.location.href
			this.$api('/portal/index/jsconfig', {datas:{url:urls}}, function(res) {
				console.log(res)
				var s = res.data.data
				jweixin.config({
				    debug: false,
				    appId: s.appId,
				    timestamp: s.timestamp,
				    nonceStr: s.nonceStr,
				    signature:s.signature,
				    jsApiList: ["updateTimelineShareData","updateAppMessageShareData"]
				});
				jweixin.ready(function(){
				jweixin.updateTimelineShareData({
						title: '海绵医学院', // 分享标题
					    link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					    imgUrl: 'http://api.haimiantv.cn/upload/default/20200426/86ea4921376b6656f24fbb40e674b361.png', // 分享图标
					    success: function () {
					      // 设置成功
						  console.log(1)

					    }
				})
				jweixin.updateAppMessageShareData({
					title: '海绵医学院', // 分享标题
					desc: '一个专业/有态度的医学直播交流平台', // 分享描述
					link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: 'http://api.haimiantv.cn/upload/default/20200426/86ea4921376b6656f24fbb40e674b361.png', // 分享图标
					success: function () {
					  // 设置成功
					}
				  })



				})
				jweixin.error(function(res){
					console.log(res)
				})
			})
		},
		methods: {
			forms(e){
				console.log(e)
				var that = this,title = e.detail.value.title,text = e.detail.value.text
				if(title == '' || text == ''){
					uni.showToast({
						title:'完善后再提交',
						icon:'none',
						duration:1500
					})
					return false
				}
				var id = uni.getStorageSync('ids')
				var datas ={
					title:title,
					content:text,
					images:that.imageList,
					uid:id
				}
				this.$api('/portal/index/save',{datas:datas},function(res){
					console.log(res)
					if(res.data.code == 200){
						uni.showToast({
							title:res.data.msg,
							icon:'success',
							duration:1500
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},1500)
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none',
							duration:1500
						})
					}
				})
			},
			chooseImage: async function() {

				var token = uni.getStorageSync('Token'),that = this
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					// #ifdef MP-WEIXIN
					sizeType: sizeType[this.sizeTypeIndex],
					// #endif
					success: (res) => {
						// console.log(res)
						uni.showLoading({
							title:'上传中'
						})
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
								url: ImgUrl.ImgUrl,
								filePath: tempFilePaths[0],
								name: 'file',
								fileType: 'image',

							 success: function(uploadFileRes) {
							 console.log(uploadFileRes);
							 var data = JSON.parse(uploadFileRes.data)
							  console.log(data);

							  that.imageList = that.imageList.concat(data.data.url);
							   uni.hideLoading()
							},
							fail:function(){
							  uni.hideLoading()
							}
						});
					}
				})
			},
			//预览图片
			previewImage: function(e) {
				console.log(e)
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			//删除图片
			deleteImage: function(e) {
				console.log(e)
				// var index = e.target.index
				// console.log(index)
				var that = this;
				var images = that.imageList;

				images.splice(e, 1);
				that.imageList = images;
			}
		}
	}
</script>

<style>
	@import url("./wod-wti.css");
</style>
